<template>
	<view class="recommend-box sticky-top">
		<view class="header-text">推荐班型</view>
		<view class="recommend-item" v-for="item in state.recommendList" :key="item.id" @click="sheep.$router.go('/pages/goods/index', {'id': item.id})">
			<image :src="sheep.$url.cdn(item.image)" class="recommend-item-image" />
			<view class="recommend-item-right">
				<view class="recommend-item-title">{{ item.title }}</view>
				<view class="ss-flex-1"></view>
				<view class="recommend-item-price">￥{{ item.price[0] }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import sheep from '@/sheep';

const state = reactive({
	recommendList: []
});

onMounted(() => {
	getRecommend();
});

function getRecommend(){
	sheep.$api.goods.getRecommend().then((res) => {
		state.recommendList = res;
	});
}
</script>

<style lang="scss" scoped>
  .sticky-top{
    z-index: 1;
  }
.recommend-box {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 300px;
	padding: 15px;
	flex-shrink: 0;
	align-self: flex-start;
	// margin-top: 42px;
	background-color: #f9f9f9;

	.recommend-item {
		display: flex;
		gap: 10px;
    cursor:pointer;

		.recommend-item-image {
			width: 120px;
			height: 90px;
			flex-shrink: 0;
		}
		.recommend-item-right {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
		}
		.recommend-item-title {
			font-size: 14px;
			color: #333333;
		}
		.recommend-item-price {
			font-size: 14px;
			color: #ff6600;
		}
	}
}
.header-text {
	font-size: 20px;
	font-weight: 600;
	color: #222;
}
</style>
